.app-container {
  --color-accent: #{$u-primary};
  --color-accent_rgb: #{$u-primary_rgb};
  --color-success: #{$u-success};
  --color-success_rgb: #{$u-success_rgb};
  --color-danger: #{$u-error};
  --color-danger_rgb: #{$u-error_rgb};
  --color-warning: #{$u-warning};
  --color-warning_rgb: #{$u-warning_rgb};

  --app-main__space_vertical: 20rpx;
  --app-main__space_horizontal: 22rpx;
  --app-main__txt_size: 28rpx;
  --app-main__txt_weight: 400;
  --app-main__txt_lheight: 1.2;
  --app-main__txt_color: var(--color-txt-primary);

  --app-navbar__body_border: 2rpx solid rgba(0, 0, 0, 0.05);
  --app-navbar__body_zindex: 50;
  --app-navbar__body_transition: top 0.3s ease-out;
  --app-navbar__title_width: 300rpx;
  --app-navbar__txt_size: 32rpx;
  --app-navbar__txt_color: var(--color-txt-primary);
  --app-navbar__icon_mright: 8rpx;
  --app-navbar__icon_size: 32rpx;
  --app-navbar__home_size: 38rpx;

  --app-tabbar__body_height: 120rpx;
  --app-tabbar__body_radius: 0;
  --app-tabbar__body_border: var(--app-divider__body_height) solid var(--color-divider);
  --app-tabbar__body_background: var(--color-bg-primary);
  --app-tabbar__body_zindex: 50;
  --app-tabbar__body_transition: bottom 0.3s ease-out;
  --app-tabbar__item_width: 120rpx;
  --app-tabbar__icon_size: 56rpx;
  --app-tabbar__icon_fontsize: 50rpx;
  --app-tabbar__txt_mtop: 6rpx;
  --app-tabbar__txt_size: 24rpx;
  --app-tabbar__txt_weight: 500;
  --app-tabbar__txt_color: #bbbdd4;
  --app-tabbar__txt_color--selected: var(--color-accent);
  --app-tabbar__badge_top--dot: 0;
  --app-tabbar__badge_right--dot: 20rpx;
  --app-tabbar__badge_size--dot: 14rpx;
  --app-tabbar__badge_radius--dot: 50%;
  --app-tabbar__badge_top--text: -10rpx;
  --app-tabbar__badge_right--text: 10rpx;
  --app-tabbar__badge_size--text: 20rpx;
  --app-tabbar__badge_padding--text: 0 10rpx;
  --app-tabbar__badge_radius--text: 20rpx;
  --app-tabbar__badge_color: #ffffff;
  --app-tabbar__badge_background: var(--color-danger);

  --app-mask__body_background: rgba(16, 16, 16, 0.5);

  --app-scroller__bktop_size: 76rpx;
  --app-scroller__bktop_right: var(--app-main__space_horizontal);
  --app-scroller__bktop_bottom: 40rpx;
  --app-scroller__bktop_zindex: 10;

  --app-divider__body_height: 0.5px;
}

.app-container.app-theme-light {
  --color-divider: #{$u-border-color};

  --color-disabled: #{$u-disabled-color};

  --color-txt-primary: #{$u-main-color};
  --color-txt-secondary: #{$u-content-color};
  --color-txt-tertiary: #{$u-tips-color};
  --color-txt-other: #{$u-light-color};

  --color-bg-primary: #{$u--bg-color};
  --color-bg-normal: #{$u-bg-color};

  --app-navbar__home_background: rgba(0, 0, 0, 0.12);

  --app-picker__mask_background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  --app-picker__loading_background: rgba(255, 255, 255, 0.86);

  --app-button__body_bdcolor--cancel: #dcdcdc;
}

.app-container.app-theme-dark {
  --color-divider: #292a31;

  --color-disabled: #212121;

  --color-txt-primary: #ffffff;
  --color-txt-secondary: #bbbbbb;
  --color-txt-tertiary: #7b7b7b;
  --color-txt-other: #474747;

  --color-bg-primary: #1e202d;
  --color-bg-normal: #13141b;

  --app-navbar__home_background: rgba(255, 255, 255, 0.08);

  --app-picker__mask_background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6)), linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6));
  --app-picker__loading_background: rgba(0, 0, 0, 0.8);

  --app-button__body_bdcolor--cancel: #323232;
}